<html>

<head>
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>聊天</title>
    <link rel="stylesheet" type="text/css" href="static/css/gpt_chat.css">
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>

<body>

<!-- 导航栏 -->
<div class="navbar">
    <div class="navbar_div">
        <ul class="navbar_left">
            <li><a href="/index">首页</a></li>
            <li><a href="/gpt_chat">gpt助手</a></li>
            <li><a href="/chat_room">聊天室</a></li>
        </ul>
        <ul class="navbar_right">
            <li><a href="javascript:;" id="isLogin">登录</a></li>
        </ul>
    </div>
</div>
<p style="height: 5%"></p>
<div class="container">
    <div class="header">
        <p>chatgpt - 3.5 在线解惑</p>
    </div>
    <!--chatbox-->
    <div class="chatBox">
        <div class="message frnd_message">
            <p>我回复有点慢，请您耐心等待！</p>
        </div>
    </div>

    <!--chat input-->
    <div class="chatbox_input">
        <input type="text" id="intext">
        <button id="but" onclick="sendMessage()">发送</button>
        <img src="static/imgs/gpt_logo.png" alt="">
    </div>
</div>

<script>
    document.addEventListener("DOMContentLoaded", function () {
        const input = document.querySelector('.chatbox_input input');
        const sendButton = document.querySelector('.chatbox_input button');
        const chatBox = document.querySelector('.chatBox');

        sendButton.addEventListener('click', function () {
            const messageText = input.value;
            if (messageText.trim() !== '') {
                const message = document.createElement('div');
                message.className = 'message my_message';
                message.innerHTML = `<p>${messageText}<br><span>${getCurrentTime()}</span></p>`;
                chatBox.appendChild(message);
                input.value = '';
                chatBox.scrollTop = chatBox.scrollHeight; // 滚动到底部显示最新消息
            }
        });

        function getCurrentTime() {
            const now = new Date();
            const hours = now.getHours().toString().padStart(2, '0');
            const minutes = now.getMinutes().toString().padStart(2, '0');
            return `${hours}:${minutes}`;
        }
    });






    function sendMessage() {
        var userInput = document.getElementById("intext").value;
        var requestBody = {
            "model": "gpt-3.5-turbo",
            "messages": [
                { "role": "system", "content": "You are a helpful assistant." },
                { "role": "user", "content": userInput }
            ]
        };

        fetch('http://one.chatchatall.top/v1/chat/completions', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'Authorization': 'Bearer sk-WE49BjaGlF48AHaX8b9741B5Fa3d4e93AdA344E46aD91cB3' // 替换为你的OpenAI API密钥
            },
            body: JSON.stringify(requestBody)
        })
            .then(response => response.json())
            .then(data => {
                var chatMessages = document.getElementById("chat-messages");
                var assistantResponse = data.choices[0].message.content;

                // 创建 <div> 元素，并设置 class 属性为 "message frnd_message"
                var messageDiv = document.createElement("div");
                messageDiv.classList.add("message", "frnd_message");

                // 创建 <p> 元素，并设置内容为 assistantResponse
                var responseParagraph = document.createElement("p");
                responseParagraph.textContent = assistantResponse;

                // 将 <p> 元素添加到 <div> 中
                messageDiv.appendChild(responseParagraph);
                // console.log(assistantResponse);
                // 将整个 <div> 添加到聊天消息容器中
                var chatBox = document.querySelector(".chatBox");
                chatBox.appendChild(messageDiv);
            })
            .catch(error => {
                // console.error('Error:', error);
                var messageDiv = document.createElement("div");
                messageDiv.classList.add("message", "frnd_message");

                // 创建 <p> 元素，并设置内容为 assistantResponse
                var responseParagraph = document.createElement("p");
                responseParagraph.textContent = "您点击太快了，歇一会在点击！！！";

                // 将 <p> 元素添加到 <div> 中
                messageDiv.appendChild(responseParagraph);
                // console.log(assistantResponse);
                // 将整个 <div> 添加到聊天消息容器中
                var chatBox = document.querySelector(".chatBox");
                chatBox.appendChild(messageDiv);
            });
    }


</script>

</body>

</html>